<template>
    <div class="login_back" :style="{'background': 'url('+backPath+')'}">
        <div class="login" >
            <form v-if="choose===1">
                <h2>博客管理系统</h2>
                <input class="selected" type="text" placeholder="请输入管理员账号" v-model="users.username" :style="{'background': users.username!=='' ? 'rgba(143,151,234,0.44)':''}">
                <input class="selected" type="password" placeholder="请输入密码" v-model="users.password" v-if="captcha" :style="{'background': users.password!=='' ? 'rgba(143,151,234,0.44)':''}">
                <div class="captcha_input">
                    <input  type="text" placeholder="验证码" style="" v-model="users.captcha" :style="{'background': users.captcha!=='' ? 'rgba(143,151,234,0.44)':''}">
                    <p class="fetch captcha">
                        <span id="captcha_">{{login_captcha[0]}}</span>
                        <span id="captcha_">{{login_captcha[1]}}</span>
                        <span id="captcha_">{{login_captcha[2]}}</span>
                        <span id="captcha_">{{login_captcha[3]}}</span>
                        <span id="captcha_">{{login_captcha[4]}}</span>
                        <span id="captcha_">{{login_captcha[5]}}</span>
                    </p>
                    <button @click="fetch($event)" class="button">换一张</button>
                </div>
                <span class="commit"  @click="login">登录</span>
            </form>
        </div>
    </div>
</template>

<script>
import request from "@/api";
import PromptInformation from "@/components/publicCommon/PromptInformation.vue";

export default {
    name: "Login",
    computed: {

    },
    components: {PromptInformation},
    data(){
        return{
            backPath:"https://www.lyzhnb.top/t01a383a4ebb4ab5a08.jpg",
            time:"",
            times:3,
            index:true,
            index_info:true,
            pas:false,
            captcha:true,
            time_info:"",
            users:{
                username:"",
                password:"",
                captcha:"",
                captcha_id:"",
            },
            sys:"系统正在升级",
            bi_:true,
            choose:1,
            login_captcha:"",
            agreement_m:false,
        }
    },
    mounted(){
        this.rand_captcha();
        request.loginCaptcha().then((res)=>{
            this.login_captcha = res.data.data.uuidValue.split('');
            this.users.captcha_id = res.data.data.id;
        })
        const this_ = this;
        document.onkeydown = function key(e){
            let keydown = window.event ? e.keyCode : e.which
            if(keydown === 13){
                if(!this_.users.captcha || !this_.users.password || !this_.users.username){
                    return;
                }
                this_.login()
            }
        };
    },
    methods:{

        rand_captcha(){
            let captcha = window.document.querySelectorAll("#captcha_");
            let index;
            for(let i =0;i<4;i++){
                index = Math.floor(Math.random() * 5);
                captcha[index].className = "rotate_left";
            }
            captcha[ Math.floor(Math.random() * 5)].className = "rotate_right";
            captcha[ Math.floor(Math.random() * 5)].className = "rotate_right";
        },
        login(){
            this.LoadTheAnimation();
            let token = window.localStorage.getItem("AUTHORIZATION_ADMIN_TOKEN");
            if(token != null){
                this.$store.commit("requestInfo", "您已经登录无需重复登录");
                this.LoadTheAnimation();
                return;
            }
            if(this.users.username == '' || this.users.password == '' || this.users.captcha == ''){
                this.$store.commit("requestInfo", "请将信息填写完整");
                this.LoadTheAnimation();
                return;
            }
            request.login(this.users).then((res)=>{
                if(res.data.code===200){
                    window.localStorage.setItem("AUTHORIZATION_ADMIN_TOKEN",res.data.data.token)
                    window.localStorage.setItem("user", JSON.stringify(res.data.data.user));
                    document.onkeydown = function (){}
                    this.$router.replace({path:'/home'});
                }else{
                    this.users.captcha = "";
                    request.loginCaptcha().then((res)=>{
                        this.login_captcha = res.data.data.uuidValue.split('');
                        this.users.captcha_id = res.data.data.id;
                    })
                    request.deleteCaptcha(this.users.captcha_id).then((res)=>{
                        this.rand_captcha();
                    })
                }
                this.users.username="";
                this.users.password="";
                this.users.captcha="";
                this.$store.commit("requestInfo", res.data.msg);
            }).catch(()=>{
                this.$store.commit("requestInfo", "网络异常，请求超时");
            })
            this.LoadTheAnimation();
        },
        LoadTheAnimation(){
            this.$store.commit("LoadTheAnimation");
        },


        fetch(e){
            if(this.index){
                e.target.innerHTML='4s';
                request.loginCaptcha().then((res)=>{
                    this.login_captcha = res.data.data.uuidValue.split('');
                    this.users.captcha_id = res.data.data.id;
                })
                request.deleteCaptcha(this.users.captcha_id).then((res)=>{

                })
                this.index=false;
                this.pas=!this.pas;
                clearInterval(this.time);
                this.rand_captcha();
                this.time=setInterval(()=>{
                    e.target.innerHTML=this.times--+'s';
                    if(this.times===-1){
                        clearInterval(this.time)
                        e.target.innerHTML="换一张";
                        this.times=3;
                        this.index=true;
                        this.pas=!this.pas;
                    }
                },1000)
            }

        },
        email(){
            let h = document.querySelector("h2");
            if(this.captcha === !this.captcha){
                h.innerHTML="登录"
            }else h.innerHTML="邮箱登录"
            this.user.username="";
            this.user.password="";
            this.user.captcha="";
        },
        infos(str) {
            this.info = "";
            this.info = str;
            if (this.index_info) {
                this.index_info = false;
                this.pas = !this.pas;
                clearInterval(this.time_info);
                this.time_info = setInterval(() => {
                    this.info = "";
                    this.index_info = true;
                }, 4000)
            }
        },
    },
}
</script>

<style scoped>

body{
    box-sizing: border-box;
}
.login_back{
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    background-position-x: 50%;
    background-position-y: 50%;
    border: 1px solid #ada8a8;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover !important;
}


form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(12, 12, 12, 0.1);
}
.captcha_input{
    position: relative;
    margin-bottom: 3vh;
    min-height: 35px;
}

.captcha_input input{
    height: 5vh;
    min-height: 35px;
    margin-bottom: 0!important;
}
input::placeholder{
    color: #eadcdc;
}
input,.commit{
    text-indent: 0.5rem;
    color: white;
    font-size:15px;
    height: 5vh;
    width: 15vw;
    min-width: 240px;
    min-height: 35px;
    outline: none;
    background: none;
    margin-bottom: 3vh;
    border: 1px solid #ffffff;
    border-radius: 3px;
    transition: all .3s;
}
.commit{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
    margin-top: 5px;
}
.captcha{
    position: absolute;
    right: 10px;
    top: 0;
    width: 5vw;
    min-height: 40px;
    min-width: 60px;
    border-radius: 1px;
}
.login{
    margin:auto;
    transform: translateY(60%);
    padding: 2vh;
    width: 27vw;
    min-width: 300px;
    min-height: 180px;
    border: 1px solid #ffffff;
    background: rgba(232, 220, 220, 0.3);
    border-radius: 5px;
    animation: login 0.8s ease-in-out 0s 1 alternate forwards;
    backdrop-filter: blur(4px); /* 模糊半径 */
    transition: all .5s;
}
.login:hover{
    box-shadow:0 0 5px 1px #f8f3f3;

}
@keyframes login {
    0%{
        transform: scale(0);
    }
    80%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

h2{
    color: #faf7f7;
    padding: 10px;
    font-weight: bolder;
}
.selected:hover,.commit:hover{
    transform: scale(1.1);
    box-shadow:0 0 5px 1px #f8f3f3;
    background: rgba(143,151,234,0.44);
}

.thirdParty img{
    margin-left: 1rem;
    transition: all .5s;
}
.thirdParty img:first-child{
    margin-left: 0;
}
.thirdParty img:hover{
    transform: scale(1.2);

}
.fetch{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    border: 0;
    color: white;
    width: auto;
    height: 100%;

}
.fetch:hover{
    cursor: pointer;
    opacity: .9;
}
.fetch span{
    position: relative;
    padding: 3px;
    font-size: 15px;
}
.button{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
    transform: translateY(100%);
    color: white;
    background: transparent;
    border: 0;
    cursor: pointer;
    content: "换一张";
}
.button:hover{
    color: #f35858;
    text-decoration: underline;
}
.rotate_left{
    transform: rotate(35deg);
}
.rotate_right{
    transform: rotate(-35deg);
}
.time{
    display: inline-block;
    position: absolute;
    padding: 5px;
    right: 0;
    top: 0;
    transform: translate(100%,50%);
    font-weight: bolder;
    color: #3586f1;
}
.info{
    display: none;
}
.auto{
    width: 17vw;
    min-width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vh;
}
.auto a{
    color: white;
}
.auto a:hover{
    transform: scale(1.1);
    text-decoration: underline;
}

@media (min-height: 0) and (max-height: 500px) {
    input{
        margin-bottom: 15px;
    }
    .fetch span{
        position: relative;
        padding: 2px;
        font-size: 12px;
    }
}
@media (min-width: 0) and (max-width: 800px) {
    .fetch span{
        position: relative;
        padding: 2px;
        font-size: 12px;
    }
}
</style>